<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:t="http://www.thymeleaf.org/extras/spring-templateresolver">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - AI Hub</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/profile.css}">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>AI Hub 社区</h1>
            
            <!-- 添加明显的返回首页按钮，使用btn样式确保可见性 -->
            <a th:href="@{/}" class="btn btn-primary back-home-btn">返回首页</a>
            
            <nav>
                <ul>
                    <!-- 移除导航列表中的返回首页链接 -->
                    <li><a th:href="@{/posts}">帖子</a></li>
                    <li><a th:href="@{/users}">用户</a></li>
                    <!-- 已登录状态显示欢迎信息和退出 -->
                    <sec:authorize access="isAuthenticated()">
                        <li class="welcome-message">
                            欢迎：<span sec:authentication="principal.username"></span>
                            <a th:href="@{/logout}" class="logout-link">退出</a>
                        </li>
                    </sec:authorize>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="profile-container">
            <div class="profile-header">
                <div class="avatar-container">
                    <!-- 修改头像路径处理方式，直接使用数据库中存储的完整路径 -->
                    <img th:src="@{${user.avatar != null ? user.avatar : '/images/default-avatar.jpg'}}" 
                         alt="用户头像" class="user-avatar">
                    <button id="changeAvatarBtn" class="btn">更换头像</button>
                    <form id="avatarForm" enctype="multipart/form-data" style="display: none;">
                        <input type="file" id="avatarFile" name="file" accept="image/*">
                    </form>
                </div>
                <div class="profile-info">
                    <h2 th:text="${user.username}"></h2>
                    <p th:text="${user.email}"></p>
                    <div class="post-stats">
                        <span data-label="帖子"><span th:text="${postCount}"></span></span>
                        <span data-label="粉丝"><span th:text="${followerCount}"></span></span>
                        <span data-label="关注"><span th:text="${followingCount}"></span></span>
                    </div>
                    <!-- 这里移除了返回首页按钮 -->
                </div>
            </div>

            <div class="profile-content">
                <div class="profile-bio">
                    <h3>个人简介</h3>
                    <p th:text="${user.bio != null ? user.bio : '这个人很懒，什么都没有留下...'}"></p>
                    
                    <!-- 以列表形式显示个人资料字段 -->
                    <div class="profile-details">
                        <ul class="profile-details-list">
                            <li th:if="${user.phoneNumber != null}"><strong>手机号：</strong><span th:text="${user.phoneNumber}"></span></li>
                            <!-- 使用#temporals代替#dates来处理LocalDate类型 -->
                            <li th:if="${user.birthDate != null}"><strong>出生日期：</strong><span th:text="${#temporals.format(user.birthDate, 'yyyy-MM-dd')}"></span></li>
                            <li th:if="${user.gender != null}"><strong>性别：</strong><span th:text="${user.gender}"></span></li>
                            <li th:if="${user.location != null}"><strong>地区：</strong><span th:text="${user.location}"></span></li>
                        </ul>
                    </div>
                    
                    <button id="editBioBtn" class="btn">编辑资料</button>
                    <form id="bioForm" style="display: none;">
                        <div class="form-group">
                            <label for="bioText">个人简介</label>
                            <textarea id="bioText" rows="4" th:text="${user.bio}"></textarea>
                        </div>
                        
                        <!-- 以列表形式展示编辑表单 -->
                        <div class="form-fields-list">
                            <div class="form-group">
                                <label for="phoneNumber">手机号</label>
                                <input type="text" id="phoneNumber" th:value="${user.phoneNumber}">
                            </div>
                            
                            <div class="form-group">
                                <label for="birthDate">出生日期</label>
                                <!-- 同样，这里也需要修改日期格式化方式 -->
                                <input type="date" id="birthDate" th:value="${user.birthDate != null ? #temporals.format(user.birthDate, 'yyyy-MM-dd') : ''}">
                            </div>
                            
                            <div class="form-group">
                                <label for="gender">性别</label>
                                <select id="gender">
                                    <option value="" th:selected="${user.gender == null}">请选择</option>
                                    <option value="男" th:selected="${user.gender == '男'}">男</option>
                                    <option value="女" th:selected="${user.gender == '女'}">女</option>
                                    <option value="其他" th:selected="${user.gender == '其他'}">其他</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="location">地区</label>
                                <input type="text" id="location" th:value="${user.location}">
                            </div>
                        </div>
                        
                        <button type="submit" class="btn">保存</button>
                        <button type="button" id="cancelBioEdit" class="btn">取消</button>
                    </form>
                </div>

                <div class="user-posts">
                    <h3>我的帖子</h3>
                    <div class="post-grid">
                        <div th:each="post : ${userPosts}" class="user-post-item">
                            <div th:if="${post.videoUrl}" class="post-media video">
                                <video th:src="${post.videoUrl}" poster="${post.videoThumbnailUrl}" loop muted></video>
                            </div>
                            <div th:unless="${post.videoUrl}" class="post-media image">
                                <img th:src="${post.coverImageUrl != null ? post.coverImageUrl : '/images/default-cover.jpg'}" alt="帖子封面">
                            </div>
                            <div class="post-meta">
                                <span th:text="${post.viewCount} + ' 浏览'"></span>
                                <span th:text="${post.likeCount} + ' 点赞'"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 AI Hub 社区. 保留所有权利.</p>
    </footer>

    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/profile.js}"></script>
    
    <!-- 移除内联的JavaScript代码，避免与外部profile.js文件冲突 -->
</body>
</html>